import { mapGetters } from 'vuex'
const mixin = {
  data () {
    return {
      listInfo: {
        tableHeight: 0 // 表格最大高度
      },
      options: {
        isMobile: false,
        isAndroid: false,
        isIpad: false
      }
    }
  },
  watch: {
    fullScreen () {
      this.listInfo.tableHeight = this.getTableHeight()
    }
  },
  computed: {
    ...mapGetters(['fullScreen'])
  },
  mounted () {
    this.setClient()
    this.listInfo.tableHeight = this.getTableHeight()
    window.addEventListener('resize', () => {
      // 最后赋值给页面的高度
      this.listInfo.tableHeight = this.getTableHeight()
    })
  },
  methods: {
    // 判断客户端
    setClient () {
      if (
        navigator.userAgent.match(
          /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
      ) {
        this.options.isMobile = true
        if (navigator.userAgent.match(/(iPad)/i)) {
          this.options.isIpad = true
        } else if (navigator.userAgent.match(/(Android)/i)) {
          this.options.isAndroid = true
        }
      }
    },
    detectOrient () {
      if (Math.abs(window.orientation) === 90) {
        // 横屏
        this.options.isRote = true
      } else {
        // 竖屏
        this.options.isRote = false
      }
    },
    getTargetClass () {
      // 获取目标类名
      // 兼容element表格和原生表格,如需在其他原生表格使用则需要添加类名 .en-table
      const els = ['el-table', 'en-table']
      for (const _ of els) {
        const currDom = document.getElementsByClassName(_)
        if (currDom.length !== 0) return _
      }
      return ''
    },
    getTableHeight () {
      // 当表格存在的时候才执行操作
      const targetClassName = this.getTargetClass()
      if (targetClassName === '') return
      // 页面总视图高度
      const boxH = document.body.clientHeight

      // 头部高度
      const Header = document.getElementsByClassName('Header')[0]
        ? document.getElementsByClassName('Header')[0].clientHeight
        : 0
      // 导航条高度
      const arrowBars = document.getElementsByClassName('el-breadcrumb')[0]
        ? document.getElementsByClassName('el-breadcrumb')[0].clientHeight
        : 0
      // 自定义模块高度
      const addstorage = document.getElementsByClassName('addstorage')[0]
        ? document.getElementsByClassName('addstorage')[0].clientHeight + 58
        : 0

      const WarehouseTab = document.getElementsByClassName('Warehouse-tab')[0]
        ? document.getElementsByClassName('Warehouse-tab')[0].clientHeight + 15
        : 0
      // 页面底部高度
      const Footer = document.getElementsByClassName('Footer')[0]
        ? document.getElementsByClassName('Footer')[0].clientHeight
        : 0
      // console.log(Footer, '底部高度')
      const pagination = document.getElementsByClassName('pagination')[0] || {
        clientHeight: 0
      }
      const pagerH = pagination.clientHeight ? pagination.clientHeight : 0
      const tab = document.getElementsByClassName(`${targetClassName}`)[0] || {
        offsetTop: 0
      }
      // table顶部距离
      const tabOffT = tab.offsetTop + 20 // +20是admin的margin
      this.options.isMobile
        ? ''
        : (document.getElementsByClassName(
          `${targetClassName}`
        )[0].style.height =
            boxH -
            Header -
            Footer -
            tabOffT -
            pagerH -
            WarehouseTab -
            addstorage +
            'px')
      let height =
        boxH - Header - Footer - tabOffT - pagerH - WarehouseTab - addstorage
      return this.options.isIpad
        ? height + 30
        : this.options.isAndroid
          ? height + 95
          : height
    },
    // // 在el-table中添加
    // // 设置表头行样式 :header-cell-style="tableHeaderColor"
    // tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
    //   return 'background-color:#F4F4F4;text-align:center'
    // },
    // //  设置表格行样式 :row-style="tableRowStyle"
    // tableRowStyle ({ row, rowIndex }) {
    //   return 'font-size:25px; color:red;'
    // },
    // // 设置颜色 :row-class-name="tableRowClassName"
    // tableRowClassName ({ row, rowIndex }) {
    //   if (rowIndex % 2 === 0) {
    //     return 'warning-row'
    //   } else {
    //     return 'success-row'
    //   }
    // }
  }
}

export default mixin
